<template>
  <transition name="dialog-fade">
    <div v-show="visible" class="my-dialog_wrapper">
      <div class="my-dialog" :style="{width: width, marginTop: top}">
        <div class="my-dialog_header">
          <slot name="title">
            <span class="my-dialog_title">{{ title }}</span>
          </slot>
          <button class="my-dialog_headerbtn" @click="clickHandle">
            <My-Icon icon="xmark"></My-Icon>
          </button>
        </div>
        <div class="my-dialog_body">
          <slot />
        </div>
        <div class="my-dialog_footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>

</template>

<script setup name="MyDialog">
import propObj from './props';
defineOptions({
  name: 'MyDialog'
});
defineProps(propObj);
const emits = defineEmits(['close']);
const clickHandle = () => {
  emits('close');
}
</script>

<style lang="scss" scoped>

</style>
